<!DOCTYPE html>
<html lang="cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/font_2754130_zfls38vk85l.css"
    />
    <link rel="stylesheet" href="./assest/style/common.css" />
    <link rel="stylesheet" href="./assest/style/login.css" />
  </head>

  <body>
    <!-- 主要内容 -->
    <div class="content">
      <!-- 登录部分 -->
      <div class="login-box bg-fff">
        <div class="phone-box flex aic rel">
          <input
            value="13800000000"
            maxlength="11"
            id="phone"
            class="phone pl-10 f16 reset-input"
            type="text"
            placeholder="请输入手机号，验证或登录"
          />
          <!-- 备用 清空按钮 -->
          <!-- <div class="clean abs f16 flex aic jc-c">✖</div> -->
        </div>
        <div class="prove-box flex aic rel">
          <input
            id="code"
            class="code f16 pl-10 reset-input"
            type="text"
            placeholder="请输入验证码"
          />
          <button id="get-code" class="get-code fff abs">获 取 验 证 码</button>
        </div>
        <div class="user-control flex jc-sa">
          <button class="cancel control-button">取 消</button>
          <button id="login" class="login control-button">登 录</button>
        </div>
      </div>
    </div>

    <script src="./js/axios.js"></script>
    <script src="./js/jQuery.js"></script>
    <script>
      var Login = {
        // 绑定事件
        bindEvents() {
          $("#get-code").on("click", function () {
            Login.getCode();
          });
          $("#login").on("click", function () {
            Login.login();
          });
          $("#code").on("change", function () {
            if (!!$(this).val()) {
              $("#login").addClass("active");
            }
          });
        },

        // 获取验证码的逻辑
        getCode() {
          var phone = $("#phone").val();
          // 1.检查用户是否输入了数字
          if (!phone) {
            alert("手机号码不能为空");
            // 不再执行后面的代码
            return false;
          }
          // 2. 检查手机号码正不正确
          if (phone.length !== 11) {
            alert("手机号码不正确, 请重新输入");
            return false;
          }

          // 3.生成四位随机验证码
          var code = "";
          for (var i = 0; i < 4; i++) {
            var random = Math.floor(Math.random() * 10);
            code += random;
          }

          // 为了避免重复添加用户, 在添加用户之前先查看用户是否已存在
          // 不存在就添加一个新用户
          // 已存在就修改原来用户的信息

          // 通过phone查找用户
          var url = `http://localhost:3000/user?q=${phone}`;
          axios.get(url).then(function (res) {
            // ===0,说明用户不存在, 创建新用户
            if (res.data.length === 0) {
              var url = "http://localhost:3000/user";
              var data = {
                phone: phone,
                code: code,
              };
              axios.post(url, data).then(function (res) {
                console.log(res.data.code);
              });
            } else {
              // 用户已存在, 修改用户信息
              var id = res.data[0].id;
              var url = "http://localhost:3000/user/" + id;
              var data = {
                phone: phone,
                code: code,
              };
              axios.patch(url, data).then(function (res) {
                console.log(res.data.code);
              });
            }
          });
        },

        login() {
          // 验证码
          var phone = $("#phone").val();
          var code = $("#code").val();
          // 判断验证码是否为空
          if (!code) {
            alert("验证码不能为空");
            return false;
          }

          var url = `http://localhost:3000/user?phone=${phone}&code=${code}`;
          axios
            .get(url)
            .then(function (res) {
              if (res.data.length === 0) {
                alert("手机号码或验证码错误");
              } else {
                // 登录成功后, 将用户id和手机号码存入浏览器缓存
                var user = res.data[0];
                // 用户id
                localStorage.userId = user.id;
                localStorage.phone = user.phone;

                // 跳转到首页或者个人中心
                location.href = "./my.html";
              }
            })
            .catch(function () {
              alert("请求失败");
            });
        },
      };
      Login.bindEvents();
    </script>
  </body>
</html>
